<template>
  <div class="cityPop">
    <van-popup
      get-container="body"
      @click-overlay="clickOverlay"
      v-model="myShow"
      duration="0.2"
      round
      position="bottom"
      :style="{ height: '400px', backgroundColor: '#f2f2f2' }"
    >
      <div class="popSlot">
        <van-cell
          class="btn_close"
          title="Select Area"
          :icon="btn_close_normal"
          @click="clickOverlay"
        />

        <van-button
          v-if="load"
          size="mini"
          class="loading"
          loading
          type="info"
          loading-text="加载中..."
        />

        <div
          class="cityAreaContent"
          v-if="!load"
        >
          <van-tabs duration="0.2">
            <van-tab
              class="slot_title"
              name="Province"
            >
              <template #title>

                <van-icon
                  name="arrow-left"
                  @click="tabBack"
                />
                <!--  :title="depTitle" -->
                <span @click="tabBack">{{depTitle}}</span>
              </template>
              <!--  icon="success" -->
              <div v-if="isProvice">
                <van-cell
                  :class="{
                  seen:item.defaultV
                }"
                  @click="clickProvince(item)"
                  v-for="(item,index) in provinceArr"
                  :key=index
                  :title=item.areaName
                  icon="success"
                />

              </div>

              <div v-if="isCity">
                <van-cell
                  @click="clickCity(item)"
                  :class="{
                  seen:item.defaultV
                }"
                  v-for="(item,index) in cityArr"
                  :key=index
                  :title=item.areaName
                  icon="success"
                />

              </div>
              <div v-if="isArea">
                <van-cell
                  @click="clickArea(item)"
                  :class="{
                  seen:item.defaultV
                }"
                  v-for="(item,index) in areaArr"
                  :key=index
                  :title=item.areaName
                  icon="success"
                />

              </div>

            </van-tab>
            <!-- <van-tab
              ref="city"
              :disabled="isCity"
              title="City"
              name="City"
            >选择城市</van-tab>
            <van-tab
              :disabled="isArea"
              title="Area"
              name="Area"
            >选择区域</van-tab> -->
          </van-tabs>
        </div>
      </div>
      <div
        v-if="!load"
        class="timeSure"
      >
        <van-button
          @click="confirm"
          type="primary"
          size="large"
        >confirm</van-button>
      </div>
    </van-popup>
  </div>
</template>
<script>
import { Area, validata, getProvince, getCity, getAreas } from '@/model/areaInstance'
import { interfaceUtils } from '@/model/interface.js'
import { getArea } from 'api/user.js'
import { Toast } from 'vant'
export default {
  name: 'cityPop',
  data() {
    return {
      myShow: false,
      load: true,
      btn_close_normal: require('../../assets/image/btn_close_normal.png'),
      depTitle: 'Province',
      isProvice: true,
      isCity: false,
      isArea: false,

      back_provinceArr: [], //一级 所有省
      back_cityArr: [], //二级 所有市
      back_areaArr: [], //三级 所有区

      provinceArr: [], //一级 所有省
      cityArr: [], //二级 所有市
      areaArr: [], //三级 所有区
      provinceId: '', //当前选中的省 id
      cityId: '', //当前选中的市 id
      areaId: '', //当前选中的 区id
      province: '',
      city: '',
      area: '',
      allTxt: ''
    }
  },
  props: {
    show: {
      // 通过props传递给子组件的show，不能在子组件内部修改props中的show值。
      type: Boolean,
      default: false
    }
  },
  watch: {
    show: {
      handler(newValue, oldValue) {
        // console.log(newValue)
        if (newValue) {
          this.myShow = true
          this.do()
          setTimeout(() => {
            this.load = false
          }, 3000)
        } else {
          this.myShow = false
          setTimeout(() => {
            this.load = true
          }, 1000)
        }
      },
      deep: true
    }
  },
  mounted() {
    setTimeout(() => {
      //  this.change_back()
    }, 200)
  },
  methods: {
    tabBack() {
      this.change_back()
      if (this.isProvice + '' == 'true' && this.isCity + '' == 'false' && this.isArea + '' == 'false') {
        console.log('1')
        this.do()
      }
      if (this.isProvice + '' == 'false' && this.isCity + '' == 'true' && this.isArea + '' == 'false') {
        console.log('2')
        this.depTitle = 'Province'
        this.do()
        this.isProvice = true
        this.isCity = false
        this.isArea = false
      }
      if (this.isProvice + '' == 'false' && this.isCity + '' == 'false' && this.isArea + '' == 'true') {
        setTimeout(() => {
          console.log('3')
          this.depTitle = 'City'
          // this.do()
          // console.log(this.provinceId)
          // setTimeout(() => {
          this.cityArr = this.back_cityArr.filter((item, index) => {
            return item.areaParentId == this.provinceId
          })
          console.log(this.back_cityArr)
          // }, 200)

          this.isProvice = false
          this.isCity = true
          this.isArea = false
        }, 1200)
      }
    },
    change_back() {
      let phone = this.$store.state.app.userInfo || 'null'

      let area = new Area(phone)

      if (validata(area, Area)) {
        let data = area._getData()
        // console.log(data)
        getArea(data)
          .then(res => {
            this.back_provinceArr = getProvince(res.data.result)
            this.back_cityArr = getCity(res.data.result)
            this.back_areaArr = getAreas(res.data.result)
          })
          .catch(err => {
            Toast.fail({
              message: err
            })
          })
        // console.log(area)
      }
    },
    do() {
      setTimeout(() => {
        let phone = this.$store.state.app.userInfo || 'null'

        let area = new Area(phone)

        if (validata(area, Area)) {
          let data = area._getData()
          // console.log(data)
          getArea(data)
            .then(res => {
              this.provinceArr = getProvince(res.data.result)
              this.cityArr = getCity(res.data.result)
              this.areaArr = getAreas(res.data.result)
            })
            .catch(err => {
              Toast.fail({
                message: err
              })
            })
          // console.log(area)
        }
      }, 200)
    },
    confirm() {
      // alert('确定')
      const provinceId = this.provinceId
      const cityId = this.cityId
      const areaId = this.areaId
      this.$emit('getCityData', this.allTxt, { provinceId, cityId, areaId })
      this.$emit('closePop')
      this.isProvice = true
      this.isCity = false
      this.isArea = false
      this.province = ''
      this.city = ''
      this.area = ''
    },
    clickOverlay() {
      this.isProvice = true
      this.isCity = false
      this.isArea = false
      this.province = ''
      this.city = ''
      this.area = ''
      this.$emit('closePop')
    },
    clickProvince(item) {
      // this.do()
      this.provinceArr.forEach(item => {
        item.defaultV = false
      })
      // console.log('item', item)
      item.defaultV = true
      this.provinceId = item.areaId
      this.province = item.areaName
      //获取父 id 为provinceId 的数据 此数据才是 显示 的 二级联动 数据

      this.cityArr = this.cityArr.filter((item, index) => {
        return item.areaParentId == this.provinceId
      })
      this.depTitle = 'City'
      this.isProvice = false
      this.isCity = true
      this.isArea = false
      this.allTxt = this.province + ' ' + this.city + ' ' + this.area
    },
    clickCity(item) {
      // this.do()
      this.provinceArr.forEach(item => {
        item.defaultV = false
      })
      // console.log('item', item)
      item.defaultV = true

      this.cityId = item.areaId
      this.city = item.areaName
      //获取父 id 为cityId 的数据 此数据才是 显示 的 三级联动 数据
      this.areaArr = this.areaArr.filter((item, index) => {
        return item.areaParentId == this.cityId
      })
      this.depTitle = 'Area'
      this.isProvice = false
      this.isCity = false
      this.isArea = true
      this.allTxt = this.province + ' ' + this.city + ' ' + this.area
      // console.log('id', this.cityId)
      // console.log('areaArr', this.areaArr)
    },
    clickArea(item) {
      // this.do()
      this.areaArr.forEach(item => {
        item.defaultV = false
      })
      // console.log('item', item.areaId)
      item.defaultV = true
      this.area = item.areaName
      this.areaId = item.areaId
      this.allTxt = this.province + ' ' + this.city + ' ' + this.area
    }
  }
}
</script>
<style lang="scss" scoped>
.popSlot {
  width: 100%;
  .btn_close {
    /deep/ .van-cell__left-icon {
      display: block;
    }
  }
  .van-cell {
    text-align: center;
    border-bottom: 1px solid #eeeeee;
    position: relative;
    /deep/ i {
      position: absolute;
      right: 14px;
      display: none;
    }
    /deep/ .van-cell__title {
      span {
        font-weight: 700;
      }
    }
  }
  .seen {
    /deep/ i {
      display: block;
    }
  }

  /deep/ .van-cell::after {
    border-bottom: none;
  }
  /deep/ .loading {
    background-color: $main-color;
    position: absolute;
    bottom: 160px;
    left: 50%;
    transform: translateX(-50%);
  }
  .cityAreaContent {
    .van-tabs {
      justify-content: left;
      /deep/ .van-tabs__line {
        background-color: transparent;
      }
      /deep/ .van-tab--active {
        border-bottom: 3px solid $main-color;
        // color: red;
        position: relative;
        font-size: 18px;
        font-weight: 700;
        line-height: 30px;
        /deep/ .van-tab__text--ellipsis {
          position: absolute;
          left: $padd;
          /deep/ .van-icon-arrow-left::before {
            font-size: 15px;
            font-weight: 700;
            // margin-right: 10px;
          }
        }
      }
    }

    .van-cell {
      text-align: left;
      /deep/ .van-cell__title {
        padding-left: $padd;
      }
      i {
        //   left: ;
        color: $main-color;
        margin-right: $padd;
      }
    }
  }
}
.timeSure {
  box-sizing: border-box;
  padding-left: $padd;
  padding-right: $padd;
  width: 100%;
  //   height: 40px;
  margin-top: 8px;
  padding-bottom: 5px;
  /deep/ .van-button--large {
    background-color: $main-color;
    border: none;
    height: 40px;
  }
}
</style>